<script>
import HeadImage from "@/components/common/HeadImage.vue";
import {Dialog} from "vant";
import Login from "@/view/Login.vue";

export default {
  name: "FriendInformation",
  components: {HeadImage},
  computed: {
    curFriendUserInfo: {
      get() {
        return this.$store.state.commonData.curFriendUserInfo
      },
      set(value) {
        this.$store.commit("commonData/setCurFriendUserInfo", value)
      }
    },
    isFriend() {
      return this.friendStore.friends.find((f) => f.id == this.curFriendUserInfo.id);
    },
    friendStore() {
      return this.$store.state.friendStore;
    },
  },
  methods: {
    onSendMessage(user) {
      let chat = {
        type: 'PRIVATE',
        targetId: user.id,
        showName: user.nickName,
        headImage: user.headImageThumb,
      };
      this.$store.commit("openChat", chat);
      this.$store.commit("activeChat", 0);
      this.$store.commit('loadingPrivateMsg', true)
      this.$nextTick(() => {
        console.log('active chat', this.$store.state.activeChat)
        this.$router.push("/home/chat");
      })
      this.$store.commit('commonData/setIsShowChatConversation', true)
      // console.log('------------------openChat', this.$store.state)
    },
    onAddFriend(user) {
      this.$http({
        url: "/friend/add",
        method: "POST",
        params: {
          friendId: user.id
        }
      }).then((data) => {
        this.$message.success("Added successfully, the other party has become your friend");
        let friend = {
          id: user.id,
          nickName: user.nickName,
          headImage: user.headImage,
          online: user.online
        }
        this.$store.commit("addFriend", friend);
      })
    },
    onDelItem(friend, idx) {
      Dialog.confirm({
        title: 'Confirm delete?',
        message: `Confirm delete'${friend.nickName}',and clear the chat history?`,
        confirmButtonColor: 'var(--chat-theme-color)',
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel',
      }).then(() => {
        this.$http({
          url: "/friend/delete",
          method: 'POST',
          params: {
            friendId: friend.id
          }
        }).then((data) => {
          this.$message.success("Successfully deleted friend");
          // this.$store.commit("removeFriend", idx);
          this.$store.commit("removePrivateChat", friend.id);
          this.$router.push('/home/contacts')
        })
      });
    },
    clickBack() {
      this.$router.push('/home/contacts')
    },
    clickVideo() {},
    clickCall() {}
  },
  mounted() {
    console.log('cur friend is: ', this.curFriendUserInfo)
  }
}
</script>

<template>
<div class="friend-info" v-if="curFriendUserInfo">
  <div class="friend-title">
    <div class="left">
      <div class="back" @click="clickBack">
        <img class="flex-center" src="../assets/image/all/back-btn-circle.png" alt="">
      </div>
    </div>
    <div class="right" v-if="false">
      <div class="camera" @click="clickVideo">
        <img class="flex-center" src="../assets/image/all/video-icon-circle.png" alt="">
      </div>
      <div class="call" @click="clickCall">
        <img class="flex-center" src="../assets/image/all/call-icon-circle.png" alt="">
      </div>
    </div>
  </div>
  <div class="friend-avatar">
    <div class="avatar">
      <head-image :size="160" :name="curFriendUserInfo.nickName" :url="curFriendUserInfo.headImage"></head-image>
    </div>
    <div class="username">{{curFriendUserInfo.userName}}</div>
    <div class="info">
      <div class="nickname">{{curFriendUserInfo.nickName}}</div>
      <div class="">|</div>
      <div class="sex">{{curFriendUserInfo.sex === 0 ? 'Male' : 'Female'}}</div>
    </div>
  </div>
  <div class="line"></div>
  <div class="more" v-if="false">
    <div class="signature">
      <div class="icon flex-center"><van-icon name="flag-o" size="22" /></div>
      <div class="text">Signature: <span v-if="!curFriendUserInfo.signature">null</span> </div>
    </div>
  </div>
  <div class="signature-text" v-if="false && curFriendUserInfo.signature">
    {{curFriendUserInfo.signature}}
  </div>
  <div class="option-btn">
      <el-button v-show="isFriend"  icon="el-icon-position" type="primary"
                 @click="onSendMessage(curFriendUserInfo)">Send a message</el-button>
      <el-button v-show="!isFriend" icon="el-icon-plus" type="primary"
                 @click="onAddFriend(curFriendUserInfo)">Add friend</el-button>
      <el-button v-show="isFriend" icon="el-icon-delete" type="danger" class="ml-5"
                 @click="onDelItem(curFriendUserInfo)">Delete friend</el-button>
<!--    <div class="send-btn">-->
<!--      <div class="icon flex-center"> <van-icon name="comment-circle" size="24" color="var(&#45;&#45;chat-error-text-color)" /> </div>-->
<!--      <div class="text">Send a message</div>-->
<!--    </div>-->
<!--    <el-button v-show="isFriend" icon="el-icon-position" type="primary"-->
<!--               @click="onSendMessage(curFriendUserInfo)">Send a message</el-button>-->
<!--    <el-button v-show="!isFriend" icon="el-icon-plus" type="primary"-->
<!--               @click="onAddFriend(curFriendUserInfo)">Add friend</el-button>-->
<!--    <el-button v-show="isFriend" icon="el-icon-delete" type="danger"-->
<!--               @click="onDelItem(curFriendUserInfo)">Delete friend</el-button>-->
<!--    <div class="delete-btn">-->
<!--      <div class="icon flex-center"> <van-icon name="delete" size="20" color="var(&#45;&#45;chat-error-text-color)"  /> </div>-->
<!--      <div class="text">Delete friend</div>-->
<!--    </div>-->
  </div>
</div>
</template>

<style scoped lang="scss">
.friend-info {
  padding: 54px 24px 0 24px;
  background: var(--im-color-white);

  .friend-title {
    height: 42px;
    display: flex;
    justify-content: space-between;
    .back, .camera, .call {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 22px;
        //height: 22px;
      }
    }

    .back, .camera, .call {
      background: rgba(255, 255, 255, 0.1);
      box-shadow: 0 4px 12px  rgba(13, 10, 44, 0.06);
    }
    .left {
      .back {
        background: rgba(255, 255, 255, 0.1);
        box-shadow: 0 4px 12px  rgba(13, 10, 44, 0.06);
      }
    }
    .right {
      display: flex;
      .camera {

      }
      .call {
        margin-left: 10px;
      }
    }
  }
  .friend-avatar {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .avatar {
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: var(--slot-color);
    }
    .username {
      margin-top: 24px;
      font-size: 22px;
      font-weight: 400;
      line-height: 25.78px;
      color: var(--chat-name-text-color);
    }
    .info {
      display: flex;
      gap: 5px;
      margin-top: 16px;
      font-size: 18px;
      color: var(--chat-name-text-color);
    }
  }
  .line {
    margin-top: 30px;
    width: 345px;
    height: 1px;
    opacity: 1;
    border-top: 1px solid rgba(240, 240, 243, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 12px 0 0 0;
  }

  .more {
    margin-top: 14px;

    .signature {
      height: 46px;
      line-height: 46px;
      .text {
        color: var(--chat-name-text-color);
      }
    }
  }
  .signature-text {
    padding-left: 5px;
    padding-bottom: 8px;
    color: var(--chat-name-text-color);
  }
  .signature,  .send-btn, .delete-btn {
    display: flex;
    align-items: center;
    .icon {
      width: 30px;
      height: 30px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .text {
      margin-left: 10px;
      font-size: 16px;
      font-weight: 400;
      line-height: 0;
      color: var(--chat-error-text-color);
    }
  }
  .option-btn {
    margin-top: 16px;
    .send-btn, .delete-btn {
      height: 46px;
      line-height: 46px;
      margin-top: 5px;
      display: flex;

    }
    .send-btn {
    }
    .delete-btn {
    }
  }
}
</style>